<template>
	<a-collapse :bordered="false">
		<template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
		</template>
		<a-collapse-panel key="1" :header="i18n('tooltipComponent','tooltip提示框组件')">
            <template #extra>
                <span @click.stop="">
                    <a-switch  size="small" v-model:checked="config.styles.tooltipShow"/>
                </span>
            </template>
			<div v-if="config.styles.tooltipShow">
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
					<a-form-item :label="i18n('raBgColor','背景颜色')">
						<rx-input-color v-model="config.styles.tooltipConfig.raBgColor" ></rx-input-color>
					</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="i18n('borderColor','边框颜色')">
							<a-input v-model:value="config.styles.tooltipConfig.borderColor"  type="color"/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="i18n('borderWidth','边框粗细')" >
							<a-input type="number" v-model:value="config.styles.tooltipConfig.borderWidth"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="i18n('padding','内边距')">
							<a-input v-model:value="config.styles.tooltipConfig.padding"/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
							<a-input placeholder="输入内容" type="number" v-model:value="config.styles.tooltipConfig.fontSize"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="chartI18n('common.fontSize','字体颜色')">
							<a-input v-model:value="config.styles.tooltipConfig.fontColor"  type="color"/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="chartI18n('common.fontStyle','字体样式')">
							<a-select v-model:value="config.styles.tooltipConfig.fontStyle">
								<a-select-option value="normal">{{chartI18n('common.normal','正常')}}</a-select-option>
								<a-select-option value="bold">{{chartI18n('common.bold','加粗')}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="24">
						<a-form-item>
                            <template #label>
                                {{ chartI18n("common.format", "格式化") }}
                                <a-tooltip>
                                    <template #title>
                                      <span style="width:500px;">
                                        {{ chartI18n("msa.formatTip", "提示") }}
                                      </span>
                                    </template>
                                    <QuestionCircleOutlined/>
                                </a-tooltip>
                            </template>
							<a-button @click="setFormatter(config.styles.tooltipConfig)">{{chartI18n("common.format","格式化")}}</a-button>
							<span v-show="config.styles.tooltipConfig.formatter" style="margin-left:5px;color: #00bb00">
								<rx-icon-show :icon="icon-linedui"></rx-icon-show>
								{{chartI18n("common.configured","已配置")}}
							</span>
						</a-form-item>
					</a-col>
				</a-row>
			</div>
		</a-collapse-panel>
	</a-collapse>
</template>

<script>
import FormatterDialog from "@/views/modules/design/dialog/formatter-dialog.vue";
import RxInputColor from "./rx-input-color.vue"
import {Util} from "@lowcode/jpaas-base-lib";

/**
 * tooltip提示框组件
 */
export default {
	name: "tooltip-config",
	components:{
		RxInputColor
	},
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			tooltipConfig:{
				raBgColor:'rgba(255,255,255,1)',
				borderColor:"#555555",
				borderWidth:1,
				padding:"5,5,5,5",
				fontSize:12,
				fontColor:"#555555",
				fontStyle:"normal"
			}
		}
	},
	created() {
		if(!this.config.styles.tooltipConfig){
            this.config.styles["tooltipShow"]=true;
            this.config.styles["tooltipConfig"]=this.tooltipConfig;
		}
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"chartLang.tooltipConfig",key);
		},
		chartI18n(name,text,key){
			return this.$ti18(name,text,"chartLang",key);
		},
		setFormatter(axisConfig){
			let self=this;
			let conf = {
				component: FormatterDialog,
				curVm: this,
				widthHeight: ['1200px', '600px'],
				title: this.chartI18n("common.format","格式化")+'(JavaScript)',
				data: {
					axisConfig: axisConfig
				},
                zIndex:999,
			}
			Util.open(conf, function (action,data) {
				if(action!="ok"){
					return;
				}
                axisConfig["formatter"]=data.formatter;
                axisConfig["formatterMode"]=data.formatterMode;
			})
		}
	},
	watch: {}
}
</script>

<style scoped>
</style>
